<template>
    <div class="common-layout">
        <el-container>
            <el-aside class="left-aside" width="168px">
                <el-scrollbar height="100%">
                    <el-collapse v-model="activeNames" @change="handleChange">
                        <el-button type="primary" @click="OntakeScreenshot">下载</el-button>
                        <el-collapse-item title="文字编辑" name="1">
                            <el-form :model="textForm" label-width="auto" style="max-width: 600px">
                                <el-form-item label="文本">
                                    <el-input v-model="textForm.text" />
                                </el-form-item>
                                <el-form-item label="坐标X">
                                    <el-input-number v-model="textForm.locationX" :min="1" :max="1000"
                                        controls-position="right" />
                                </el-form-item>
                                <el-form-item label="坐标Y">
                                    <el-input-number v-model="textForm.locationY" :min="1" :max="1000"
                                        controls-position="right" />
                                </el-form-item>
                                <el-form-item label="颜色">
                                    <el-color-picker v-model="textForm.color" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="OnAddText">创建文字</el-button>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <el-collapse-item title="图片编辑" name="2">
                            <div>
                                <img class="image-item" v-for="(item, index) in images" :id="`image-${index}`"
                                    :key="item" :src="item" @click="OnAddImage(item, index)">
                            </div>
                        </el-collapse-item>
                        <el-collapse-item title="矢量图绘制" name="3">
                            <el-divider content-position="left">添加矩形</el-divider>
                            <el-form :model="rectForm" label-width="auto" style="max-width: 600px">
                                <el-form-item label="宽度">
                                    <el-input-number v-model="rectForm.width" :min="1" :max="1000"
                                        controls-position="right" />
                                </el-form-item>
                                <el-form-item label="高度">
                                    <el-input-number v-model="rectForm.height" :min="1" :max="1000"
                                        controls-position="right" />
                                </el-form-item>
                                <el-form-item label="坐标X">
                                    <el-input-number v-model="rectForm.locationX" :min="1" :max="1000"
                                        controls-position="right" />
                                </el-form-item>
                                <el-form-item label="坐标Y">
                                    <el-input-number v-model="rectForm.locationY" :min="1" :max="1000"
                                        controls-position="right" />
                                </el-form-item>
                                <el-form-item label="颜色">
                                    <el-color-picker v-model="rectForm.color" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="OnAddRect">创建矩形</el-button>
                                </el-form-item>
                            </el-form>
                            <el-divider content-position="left">添加圆</el-divider>
                            <el-form :model="circleForm" label-width="auto" style="max-width: 600px">
                                <el-form-item label="半径">
                                    <el-input-number v-model="circleForm.radius" :min="1" :max="1000"
                                        controls-position="right" />
                                </el-form-item>
                                <el-form-item label="坐标X">
                                    <el-input-number v-model="circleForm.locationX" :min="1" :max="1000"
                                        controls-position="right" />
                                </el-form-item>
                                <el-form-item label="坐标Y">
                                    <el-input-number v-model="circleForm.locationY" :min="1" :max="1000"
                                        controls-position="right" />
                                </el-form-item>
                                <el-form-item label="颜色">
                                    <el-color-picker v-model="circleForm.color" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="OnAddCircle">创建圆</el-button>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                    </el-collapse>
                </el-scrollbar>
            </el-aside>
            <el-main class="right-main">
                <div id="canvas-container">
                    <canvas id="canvasEl" width="2000px" height="2000px"></canvas>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script setup name="FabricDemo">
import { nextTick, onMounted, ref } from 'vue';
import * as fabric from 'fabric';
const images = ref([
    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://tse4-mm.cn.bing.net/th/id/OIP-C._A2em49iRuEooimu4-C4JAAAAA?rs=1&pid=ImgDetMain',
    'https://www.keaitupian.cn/cjpic/frombd/0/253/1337523709/3189363458.jpg',
    'https://www.keaitupian.cn/cjpic/frombd/2/253/2729874172/1165555367.jpg',
    'https://tse2-mm.cn.bing.net/th/id/OIP-C.UsavMQ7MV08TtUiCaEKTAAAAAA?rs=1&pid=ImgDetMain'
]);
const canvasEl = ref(null);
const InitCanvas = () => {
    canvasEl.value = new fabric.Canvas('canvasEl', {
        selection: true,
    });
};
const rectForm = ref({
    width: 200,
    height: 200,
    locationX: 0,
    locationY: 0,
    color: 'red'
});
const OnAddRect = () => {
    var rect = new fabric.Rect({
        left: rectForm.value.locationX,
        top: rectForm.value.locationY,
        fill: rectForm.value.color,
        width: rectForm.value.width,
        height: rectForm.value.height
    });
    canvasEl.value.add(rect);
};
const circleForm = ref({
    radius: 200,
    locationX: 0,
    locationY: 0,
    color: 'red'
});
const OnAddCircle = () => {
    var rect = new fabric.Circle({
        left: circleForm.value.locationX,
        top: circleForm.value.locationY,
        fill: circleForm.value.color,
        radius: circleForm.value.radius
    });
    canvasEl.value.add(rect);
};
const OnAddImage = (url, index) => {
    var imgElement = document.getElementById(`image-${index}`);
    var imgInstance = new fabric.FabricImage(imgElement, {
        left: 0,
        top: 0
    });
    canvasEl.value.add(imgInstance);
};
const textForm = ref({
    text: 'Hello World',
    fontSize: 40,
    locationX: 0,
    locationY: 0,
    color: 'red'
});
const OnAddText = () => {
    const comicSansText = new fabric.FabricText(textForm.value.text, {
        fontSize: textForm.value.fontSize,
        left: textForm.value.locationX,
        top: textForm.value.locationY,
        fill: textForm.value.color,
    });
    canvasEl.value.add(comicSansText);
};
const OntakeScreenshot = () => {
    var dataURL = canvasEl.value.toDataURL({
        format: 'jpeg',
        quality: 1,
    });
    var downloadLink = document.createElement('a');
    downloadLink.href = dataURL;
    downloadLink.download = 'canvas.jpeg';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
};
onMounted(() => {
    nextTick(() => {
        InitCanvas();
    });
});
</script>
<style>
.common-layout {
    width: 100vw;
    height: 100vh;
}

.left-aside {
    height: 100vh;
    margin-left: 8px;
}

.right-main {
    height: 100vh;
}

#canvas-container {
    height: calc(100vh - 40px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

.image-item {
    width: 50px;
    height: 50px;
    margin: 3px;
    cursor: pointer;
    transition: 0.5s;
}

.image-item:hover {
    box-shadow: 0 0 10px rgba(8, 143, 246, 0.8);
}
</style>